import React, {Component} from 'react';
import {
  AppRegistry, Image, ListView, StyleSheet,
  Text, TouchableHighlight, View, StatusBar, Platform
} from 'react-native';

import HTTPUtil from '../../utils/NetUitl'
import api from '../../utils/api'
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

class ListSelect extends Component<Props, State>  {
  static navigationOptions = {
    title: 'IT资讯',
    headerStyle: { backgroundColor: '#0099ff', },
    headerTintColor: '#FFFFFF',
    headerTitleStyle: { color: 'white' },
  };

  constructor(props) {
    super(props);
    this.state = ({
      dataSource: ds.cloneWithRows([{
        name: 'CNodeJS',
        logo: require('../../img/home/icon_homepage_food_category.png')
      }, {
        name: '开源中国',
        logo: require('../../img/home/icon_homepage_food_category.png')
      }, {
        name: '开发者头条',
        logo: require('../../img/home/icon_homepage_food_category.png')
      }, {
        name: '推酷',
        logo: require('../../img/home/icon_homepage_food_category.png')
      }, {
        name: '知乎日报',
        logo: require('../../img/home/icon_homepage_food_category.png')
      }, {
        name: 'V2EX',
        logo: require('../../img/home/icon_homepage_food_category.png')
      }, {
        name: '36氪',
        logo: require('../../img/home/icon_homepage_food_category.png')
      }, {
        name: '掘金',
        logo: require('../../img/home/icon_homepage_food_category.png')
      }]),
    });
    this.requestTestData();

  }
    requestTestData = async () => {
        let formData = new FormData();
        formData.append("marker", "");
        formData.append("limit", 10);
        HTTPUtil.post(api.productList, formData).then((json) => {
            console.log(JSON.stringify(json))
                alert(JSON.stringify(json))
            //处理 请求success
            // if(json.code === 0 ){
            //     //我们假设业务定义code为0时，数据正常
            // }else{
            //     //处理自定义异常
            //     this.doException(json);
            // }
        }, (json) => {
            //TODO 处理请求fail
            alert("处理请求fail")
        })
    }
  _onPress(rowData) {
    // const {navigate} = this.props.navigation;
    // if (rowData === 'CNodeJS') {
    //   navigate('CNodeJS', {
    //     name: rowData,
    //   })
    // } else if (rowData === '开源中国') {
    //   navigate('OSChina', {
    //     name: rowData,
    //   })
    // } else if (rowData === '开发者头条') {
    //   navigate('TouTiao', {
    //     name: rowData,
    //   })
    // } else if (rowData === '推酷') {
    //   navigate('TuiCool', {
    //     name: rowData,
    //   })
    // } else if (rowData === 'SegmentFault') {
    //   navigate('SegmentFault', {
    //     name: rowData,
    //   })
    // } else if (rowData === '知乎日报') {
    //   navigate('ZhihuDaily', {
    //     name: rowData,
    //   })
    // } else if (rowData === 'V2EX') {
    //   navigate('V2EX', {
    //     name: rowData,
    //   })
    // } else if (rowData === '36氪') {
    //   navigate('kr36', {
    //     name: rowData,
    //   })
    // } else if (rowData === '掘金') {
    //   navigate('juejin', {
    //     name: rowData,
    //   })
    // }
  }

  render() {
    return <View style={{flex: 1}}>
      {
        Platform.OS === 'ios' ? <StatusBar barStyle='light-content' backgroundColor='#FFFFFF'/> : null
      }
      <ListView
        style={styles.listView}
        dataSource={this.state.dataSource}
        renderRow={(rowData) =>
          <TouchableHighlight
            style={styles.rowStyle}
            underlayColor='#008b8b'
            onPress={() => this._onPress(rowData.name)}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Image style={{width: 40, height: 40, borderRadius: 4}} source={rowData.logo}/>
              <Text style={styles.rowText}>{rowData.name}</Text>
            </View>
          </TouchableHighlight>}
      />
    </View>
  }
}

const styles = StyleSheet.create({
  listView: {
    backgroundColor: '#eee',
  },
  rowText: {
    marginLeft: 10,
    fontSize: 18,
    flex: 1,
  },
  rowStyle: {
    backgroundColor: '#FFFFFF',
    padding: 10,
    marginBottom: 1,
  },
});
//
// const ITNews = StackNavigator({
//   // Home: {screen: HomeScreen},
//   // CNodeJS: {screen: CNodeJSList},
//   // OSChina: {screen: OSChinaList},
//   // TouTiao: {screen: ToutiaoList},
//   // TuiCool: {screen: TuiCoolList},
//   // SegmentFault: {screen: SegmentFaultList},
//   // ZhihuDaily: {screen: ZhihuDailyList},
//   // V2EX: {screen: V2EXList},
//   // kr36: {screen: Kr36List},
//   // juejin: {screen: JueJinList},
//   // NewsDetail: {screen: NewsDetail,},
// })
export default ListSelect

